<template>
  <div class="dashboard-container">
    <div class="app-container">
    <el-card>
    <el-button  style="margin-bottom:10px" type="info" plain size="small" @click="$router.push({name:'articles-add'})">新增面试技巧</el-button>
      <el-form label-width="80px">
        <el-form-item label="关键字">
          <el-input v-model="reqParams.keyword" placeholder="请输入题目编号/题干" size="small" style="width:200px" ></el-input>
          <div class="btn">
            <el-button size="small" style="text-align:center">清除</el-button>
            <el-button type="primary" size="small" style="text-align:center">搜索</el-button>
          </div>
        </el-form-item>
        
      </el-form>
      <!-- 表格 -->
       
        <el-table :data="articles"> 
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="阅读人数" prop="reads"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">启用</span>
              <span v-if="scope.row.state==0">禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="录入人" prop="creator"></el-table-column>
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-link type="primary" size="small">预览</el-link>
              <el-link type="primary" size="small">修改</el-link>
              <el-link type="primary" size="small">删除</el-link>
              <el-link type="primary" size="small">禁用</el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
        class="pager"
        background
        layout="prev, pager, next, sizes, jumper"
        :page-size="reqParams.pagesize"
        :total="total"
        :current-page="reqParams.page"
        :page-sizes="[1,2,3,4,5]"
        @size-change="sizeChange"
        @current-change="currentChange"
      ></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/articles.js'
export default {
  name: 'ArticlesList',
  data() {
    return {
      articles: [],
      total: 0,
      reqParams: {
        page: 1,
        pagesize: 5,
        keyword: null
      }
    }
  },
  created() {
    this.getArticles()
  },
  methods: {
   async getArticles() {
      const res = await list(this.reqParams)
      console.log(res.data.items)
      this.articles = res.data.items
    },
    sizeChange(size) {
      this.reqParams.pagesize = size
      this.getArticles()
    },
    currentChange (page) {
      this.reqParams.page = page
      this.getArticles()
    }
  }
}
</script>

<style scoped>
.btn{
  float:right;
  margin-right:0;
}
.pager{
  text-align:center;
  margin-top: 20px;
}
</style>
